<div data-role="page" data-theme="a" id="confRecargaPage" class="pageBradesco">
	<div id="header" data-role="header" data-position="fixed">				
		<h1 class="headerBradesco">Bradesco</h1>
    	<a href="#" data-icon="delete" id="logoutBtn" onclick="logout();" data-theme="d">logout</a>
		<span id="sessionTime">Sessão expira em:<br /><span></span></span>
	</div>
	<div data-role="content" data-theme="a">
		<ul data-role="listview" data-inset="true">
		    <li data-role="list-divider">Resumo de compra:</li>
		    <li>
				<div data-role="fieldcontain" class="ui-shadow">
					<div class="ui-grid-a">
						<div class="ui-block-a">Agência: <span id="confRecAg"></span></div>
						<div class="ui-block-b">Conta: <span id="confRecCt"></span></div>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a u-u">Produto: Recarga de Celular</div>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a">Estado: <span id="confRecEst"></span></div>
						<div class="ui-block-b">Operadora: <span id="confRecOp"></span></div>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a">DDD: <span id="confRecDdd"></span></div>
						<div class="ui-block-b">Tel.: <span id="confRecTel"></span></div>
					</div>
					<div class="ui-grid-a">
						<div class="ui-block-a"></div>
						<div class="ui-block-b">Valor: R$<span id="confRecValor"></span></div>
					</div>
					<br />
					<br />
					<div class="ui-grid-b d-t">
						<div class="ui-block-a"></div>
						<div class="ui-block-b"><input type="number" pattern="[0-9]{4}" required size="4" maxlength="4" required placeholder="Token" data-clear-btn="true" id="inputToken" name="inputToken" /></div>
						<div class="ui-block-c"></div>
					</div>
					<div class="ui-grid-b d-t">
						<div class="ui-block-a"></div>
						<div class="ui-block-b"><input type="button" onclick="confirmaRecarga();" value="Confirmar" id="confirmaRec" name="confirmaRec" data-theme="d" /></div>
						<div class="ui-block-c"></div>
					</div>
				</div>
		    </li>
		</ul>

	</div>
	<div data-role="footer" id="footer" data-id="footer" data-position="fixed" class="nav-bradesco ui-footer ui-bar-d">
		<div data-role="navbar" class="nav-bradesco ui-navbar ui-mini" data-theme="d" role="navigation">
			<ul>
				<li><a id="menu" onclick="$.mobile.changePage('menu.html')" data-icon="custom">Menu</a></li>
				<li><a id="subscribe" data-icon="custom">Subscribe</a></li>
				<li><a id="mapa" onclick="$.mobile.changePage('mapa.html')" data-icon="custom">Mapa</a></li>
				<li><a id="token" onclick="generateToken();" data-icon="custom">Token</a></li>
			</ul>
		</div>
	</div>
</div>